<template>
  <div class="detail_container">
    <div class="container">
      <h2 class="home_item_title"><span>选择，决定未来的方向</span><b>SELECT</b></h2>
      <div class="content">
        <div class="item1">
          <div class="item_text">
            <h2>我们想要的......</h2>
            <p>“只要你有一定的逻辑能力和学习决心，剩下的事情交给我们”，这就是我们对学生的唯一要求。</p>
          </div>
          <p class="img_select"><img src="/static/img/select_intro.png" alt=""></p>
          <span class="ball_s"><img src="/static/img/ball_s.png" alt=""></span>
        </div>
        <div class="item2">
          <div class="item_text">
            <article>
              我们会更加注重学生实践经验的积累 <br>
              我们会更加注重培养学生成为一名合格的程序员 <br>
              我们会更加注重加强学生与当下正处于开发人员的交流 <br>
            </article>
            <article>
              这就是我们平台的教学重心，我们致力于培养学生更加适应<br>这个开发的岗位，培养他们的学习能力，培养他们的团队协 <br>作能力，
              培养他们的沟通交流能力等等，我们的目标是希望 <br>每一位学生能在入职以后快速融入公司的开发小组中。 <br>
            </article>
            <p class="ball_m"><img src="/static/img/ball_m.png" alt=""></p>
            <p class="ball_l"><img src="/static/img/ball_l.png" alt=""></p>
            <p class="item2_img"><img src="/static/img/item2.png" alt=""></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import DxHeader from 'common/header/header'
  import DxFooter from 'common/footer/footer'
  export default {
    name: 'Intro',
    props: {
      List: Array
    },
    components: {
      DxHeader,
      DxFooter
    },
    data () {
      return {}
    }
  }
</script>

<style scoped="scoped" lang="stylus">
  @import '~styles/varibles.styl'
  .detail_container {
    background #fff
    padding: 90px 0 100px;
    .home_item_title {
      text-align: left;
      span {
        &:after {
          left 0
          margin-left 0
        }
      }
    }
    .content {
      margin-top 40px;
    }
    .item1 {
      background: url("/static/img/item1.png") no-repeat;
      background-size: contain;
      height 396px;
      width 100%
      position relative
      .img_select{
        position absolute
        top:0
        right:0
      }
      .item_text {
        height 260px;
        width 520px;
        position absolute
        right 40px;
        top: 85px;
        box-sizing border-box;
        padding 50px 54px 50px 34px;
        h2 {
          color $mainColor;
          font-weight 400
          font-size 22px;
        }
        p {
          margin-top 28px;
          font-size 16px;
          color #333
          line-height: 28px;
        }
      }
    }
    .item2 {
      padding 20px 0 0 110px
      position relative
      article {
        margin-top 40px;
        font-size 16px;
        color #333
        line-height: 28px;
      }
      .item2_img{
        width 440px;
        height 440px;
        position absolute
        top:-90px;
        right 0
        z-index 95
      }
    }
  }

  .ball_s{
    position absolute
    right  50px;
    top:92px
  }
  .ball_m{
    position absolute
    left 40px;
    top:255px
  }
  .ball_l{
    position absolute
    left 600px;
    top:205px
    z-index 100
  }
</style>
